<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>ItripMonitor</title>
<!--
[if lt IE 9]>
      <script src="http://cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="http://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
<![endif]
-->
<link href="./favicon.ico" type="image/x-icon" rel=icon>
<link rel="stylesheet" type="text/css"
	href="/themes/bootstrap/easyui.css">
<link href="/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="/themes/icon.css">
<script src="/js/jquery.min.js"></script>
<script src="/js/jquery.easyui.min.js"></script>
<script src="/js/util.js"></script>
</head>
<body>
	<ul id="nav" style="margin-top: -70px;"></ul>
	<div class="container-fluid">
		<div class="panel panel-success">
			<div class="panel-heading">
				<label for="host">机器</label><input id="host" name="host" value="">
				<label>开始</label> <input class="easyui-datetimebox" name="bTime"
					id="bTime" value="8/15/2016 0:0"> <label for="eTime">结束</label>
				<input class="easyui-datetimebox" name="eTime" id="eTime"
					value="8/16/2016 2:3">
				<button class="btn btn-success" id="qBtn"
					onclick="return doQuery('common.selectOSInfo')">查询</button>
			</div>
			<div class="panel-body">
				<div class="row">
					<div class="col-sm-6" id="cpu"></div>
					<div class="col-sm-6" id="load"></div>
				</div>
				<hr>
				<div class="row">
					<div class="col-sm-6" id="mem"></div>
					<div class="col-sm-6" id="net"></div>
				</div>
				<hr>
				<div class="row">
					<div class="col-sm-6" id="disk"></div>
					<div class="col-sm-6" id="flow"></div>
				</div>
			</div>
		</div>
	</div>
	<script src="/js/bootstrap.min.js"></script>
	<script src="/js/highcharts.js"></script>
	<script type="text/javascript">
	
		var date = new Date();
		$("#eTime").val(date.Format('yyyy-MM-dd HH:mm'));
		date.setMinutes(date.getMinutes() - 5);
		$("#bTime").val(date.Format('yyyy-MM-dd HH:mm'));

		initNavMenu('#nav');
		Util.builCombox('#host', '/ui/select?id=queryMonitorHosts', 'key',
				'value');
		
		
		function getFormVal(type) {
			var arr = {
				'server' : Util.getCombobox('#host'),
				'bTime' : getTime('#bTime'),
				'eTime' : getTime('#eTime'),
				'type' : type
			};
			return arr;
		}

		function doQuery(queryId) {
			if (!Util.getCombobox('#host')) {
				alert('请选择服务器');
				return false;
			}
			loadCpuInfo(queryId);
			loadOSLoad(queryId);
			loadMem(queryId);
			loadTCP(queryId);
			return false;
		}

		function toChartData(queryId, dbType, names, elmId, type, title) {
			var param = getFormVal(dbType);
			$.get('/ui/queryReport?queryId=' + queryId, {
				"param" : JSON.stringify(param)
			}, function(res) {
				var row, server = '', data = res.data;
				for ( var i in data) {
					row = data[i];
					server = row['server'];
					var name = row['name'];
					var item = names[name];
					var time = row['create_time'];
					if (item) {
						var val = row['val'];
						if (typeof val == 'Float')
							val = parseFloat(val);
						else
							val = parseInt(val);
						item.data.push([ time, val ]);
					}
				}
				var sers = Util.getJsonValues(names);
				createTimeChart(elmId, type, sers, server + title);
			});
		}

		function loadCpuInfo(queryId) {
			var cpus = {
				"us" : {
					"name" : "CPU-user",
					"data" : []
				},
				"sy" : {
					"name" : "CPU-system",
					"data" : []
				},
				"id" : {
					"name" : "CPU-idle",
					"data" : []
				},
				"wa" : {
					"name" : "CPU-iowait",
					"data" : []
				}
			};
			toChartData(queryId, 'cpu', cpus, '#cpu', 'spline', '-CPU');
		}

		function loadMem(queryId) {
			var mems = {
				"total" : {
					"name" : "内存",
					"data" : []
				},
				"used" : {
					"name" : "使用内存",
					"data" : []
				},
				"stotal" : {
					"name" : "交换区",
					"data" : []
				},
				"sused" : {
					"name" : "使用交换区",
					"data" : []
				}
			};
			toChartData(queryId, 'mem', mems, '#mem', 'area', '-内存');
		}

		function loadOSLoad(queryId) {
			var names = {
				"m1" : {
					"name" : "1分钟",
					"data" : []
				},
				"m5" : {
					"name" : "5分钟",
					"data" : []
				},
				"m15" : {
					"name" : "15分钟",
					"data" : []
				}
			};
			toChartData(queryId, 'load', names, '#load', 'spline', '-负载');
		}

		function loadTCP(queryId) {
			var names = {
				"in_80" : {
					"name" : "80服务端",
					"data" : []
				},
				"out_3306" : {
					"name" : "3306客户端",
					"data" : []
				},
				"all" : {
					"name" : "TCP-all",
					"data" : []
				}
			};
			toChartData(queryId, 'net', names, '#net', 'spline', '-TCP连接数');
		}
	</script>
</body>
</html>